<script setup>
import {shallowRef} from "vue";

/**
 * myData: 当前已选项数组
 * allData: 全部可选项数组
 * labelField: 选项的文案-对应的后台属性
 * valueKey: 选项的值-对应的后台属性
 * fn: 点击确认修改后触发的函数
 */
let parent = defineProps({
  'myData': {type: Array, required: true},
  'allData': {type: Array, required: true},
  'labelField': {type: String, required: true},
  'valueKey': {type: String, required: true},
  'fn': {type: Function, required: false},
});
// 构建key数组（清空数组，防止叠加）
const valueKeys = shallowRef([]);
valueKeys.value = [];
valueKeys.value = Object.values(parent['myData']).map(e => e[parent['valueKey']]);

</script>

<template>
  <div style="text-align: center">
    <el-transfer v-model="valueKeys" :data="allData"
                 filterable filter-placeholder="输入关键字"
                 :titles="['全部可选项', '当前已选项']"
                 :props="{'key': valueKey, 'label': labelField}"
                 :button-texts="['移除', '添加']"/>
    <el-divider/>
    <el-button class="update-roles-btn" type="primary"
               @click="fn(valueKeys)">确认修改
    </el-button>
  </div>
</template>

<style scoped lang="scss">
/* 修改EL穿梭框高度 */
:deep(.el-transfer-panel), :deep(.el-transfer-panel__body) {
  height: 550px; // 高度
}

.update-roles-btn {
  width: 100%; // 宽度
}
</style>